<template>
  <!-- 详情 -->
  <el-dialog title="空车作业单详情" :visible.sync="dialogVisible" width="50%" append-to-body :close-on-click-modal="false"
    :before-close="closedialog">
    <el-descriptions :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          业务编号
        </template>
        {{form.platSeqNo}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          单证编号
        </template>
        {{form.billCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          运输次号代码
        </template>
        {{form.manifestId}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车牌号
        </template>
        {{form.transportName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          海关编号
        </template>
        {{form.customsCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          关区名称
        </template>
        {{form.customsName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          起始场所
        </template>
        {{form.startFieldName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          申报企业
        </template>
        {{form.declCopName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          进出口标志
        </template>
        {{form.iEFlag}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          单证类型
        </template>
        {{form.billType}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          业务类型
        </template>
        {{form.businessType}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人
        </template>
        {{form.createBy}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{form.createTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          申报人
        </template>
        {{form.declBy}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          申报时间
        </template>
        {{form.declTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          申报次数
        </template>
        {{form.declRetryNum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新人
        </template>
        {{form.updateBy}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新时间
        </template>
        {{form.updateTime}}
      </el-descriptions-item>
     <template slot="label">
       单证状态
     </template>
     <dict-tag :options="dict.type.bills_decl_status" :value="form.auditStatus" />
      <el-descriptions-item>
        <template slot="label">
          审核时间
        </template>
        {{form.auditTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          审批意见
        </template>
        {{form.auditRemark}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          退单备注
        </template>
        {{form.chargebackReason}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          备注
        </template>
        {{form.remark}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          转场单号
        </template>
        {{form.transferPlatSeqNo}}
      </el-descriptions-item>
    </el-descriptions>
    <div class="ui-basic-content">
      <el-tabs v-model="activeName" type="card" >
        <el-tab-pane label="车辆列表" name="tabVehicle">
          <!-- 运输工具信息 -->
          <el-table :data="tableVehicleData" style="width: 100%"  max-height="250">
            <el-table-column prop="transportName" label="车牌"></el-table-column>
            <el-table-column prop="selfWt" label="自重"></el-table-column>
            <el-table-column prop="location" label="位置">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.bill_vehicle_location" :value="scope.row.location"/>
              </template>
            </el-table-column>
             <el-table-column prop="transportId" label="备案编号"></el-table-column>
            <el-table-column prop="trayName" label="挂车"></el-table-column>
            <el-table-column prop="trayWt" label="挂重"></el-table-column>
            <el-table-column prop="icCard" label="IC卡号"></el-table-column>
            <el-table-column prop="rfid" label="电子车牌"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="集装箱" name="tabConta">
          <!-- 运输工具信息 -->
          <el-table :data="tableContaData" style="width: 100%"  max-height="250">
            <el-table-column prop="contaNo" label="箱号"></el-table-column>
            <el-table-column prop="contaWt" label="自重"></el-table-column>
            <el-table-column prop="emptyConta" label="空重标识">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.bills_conta_empty_mark" :value="scope.row.emptyConta"/>
              </template>
            </el-table-column>
            <el-table-column prop="transportName" label="车辆"></el-table-column>
            <!-- <el-table-column prop="sealsNo" label="封志号"></el-table-column>
            <el-table-column prop="esealNo" label="锁号"></el-table-column> -->
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getGEmptyBills
  } from "@/api/billsdecl/gEmptyBills";
  export default {
    props: {
      dict: {}
    },
    data() {
      return {
        //显示详情
        dialogVisible: false,
        activeName: 'tabVehicle',
        tableVehicleData: [],
        tableContaData: [],
        form: {
          platSeqNo: null,
          billCode: null,
          uniId: null,
          manifestId: null,
          transportName: null,
          fieldCode: null,
          fieldName: null,
          customsCode: null,
          customsName: null,
          startFieldCode: null,
          startFieldName: null,
          desFieldCode: null,
          desFieldName: null,
          declCopCode: null,
          declCopName: null,
          iEFlag: null,
          billType: null,
          businessType: null,
          createBy: null,
          createTime: null,
          declBy: null,
          declTime: null,
          declRetryNum: null,
          updateBy: null,
          updateTime: null,
          auditStatus: "0",
          auditTime: null,
          auditRemark: null,
          chargebackReason: null,
          remark: null,
          transferPlatSeqNo: null
        }
      }
    },
    methods: {
      open(row) {
        this.dialogVisible = true;
        this.loadDetail(row);
      },
      closedialog() {
        this.dialogVisible = false;
        this.activeName='tabVehicle';
      },
      // 获取详情
      loadDetail(row) {
        getGEmptyBills(row.platSeqNo).then((res) => {
          if (res.code == 200) {
            this.form = res.data;
            this.tableVehicleData=res.data.vehicleList;
            this.tableContaData=res.data.contaList;
          }
        });
      },
    }
  };
</script>

<style>

</style>
